<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>个人中心</title>
    <!-- vue -->
    <script src="../common/js/vue2.js"></script>
    <!-- 引入通用css -->
    <link rel="stylesheet" href="../common/public.css" />
    <!-- 引入http-vue-loader -->
    <script src="../common/js/vueLoader.js"></script>
    <!-- 引入样式vant -->
    <link rel="stylesheet" href="../common/ui/vant-ui/ui.css" />
    <script src="../common/ui/vant-ui/ui.js"></script>
  </head>
  <body>
    <div id="app">
      <main-top></main-top>
      <div class="mainCenter">
        <div class="leftContent">
          <!-- 顶部 -->
          <div class="pd10 jbbgc">
            <div class="flex">
              <div class="f1"></div>
              <div class="iconGroup">
                <div><van-icon name="friends-o" /></div>
                <div><van-icon name="scan" /></div>
                <div><van-icon name="setting-o" /></div>
              </div>
            </div>
            <div class="pd8 flex aic">
              <div class="navar"></div>
              <div class="">
                <div class="fs18 fwb">{{ userInfo.name }}</div>
                <div class="fs14">
                  {{ userInfo.company }}·招聘者
                  <van-icon name="info-o" />
                  <van-icon name="arrow" />
                </div>
              </div>
            </div>
            <div class="flex jcsa mgt20">
              <div v-for="i in userInfo.tag">
                <div class="flex column aic">
                  <div class="fwb">{{ i.num }}</div>
                  <div class="fs12">{{ i.name }}</div>
                </div>
              </div>
            </div>
            <div class="flex jcsa mgt20">
              <div class="fs14">{{ userInfo.jobNum }}个在线职位</div>
              <div></div>
              <div class="fs14 c9">管理职位<van-icon name="arrow" /></div>
            </div>
          </div>
          <!-- 常用功能 -->
          <div class="mcard">
            <div class="fwb mgb20">常用功能</div>
            <div class="flex jcsb">
              <div v-for="i in useCommon">
                <div class="flex column aic">
                  <div class="pore">
                    <van-icon :name="i.icon" size="30" />
                    <div class="redTag" v-if="i.tag">{{ i.tag }}</div>
                  </div>
                  <div class="fs14">{{ i.name }}</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 其他功能 -->
          <div class="mcard">
            <div class="flex jcsb aic mgb20">
              <div class="fwb">其他功能</div>
              <div class="flex aic">
                <div class="fs14">查看全部</div>
                <div class="redCircle"></div>
                <div><van-icon name="arrow" size="14" /></div>
              </div>
            </div>
            <div class="flex fww jcsb">
              <div v-for="i in ortherCommon">
                <div class="flex column aic tagbox" @click="topage(i.url)">
                  <div class="pore">
                    <van-icon :name="i.icon" size="30" />
                    <div class="redTag" v-if="i.tag">{{ i.tag }}</div>
                  </div>
                  <div class="fs14">{{ i.name }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <lan-adright></lan-adright>
      </div>
      <main-footer></main-footer>
    </div>
  </body>
</html>
<style>
  .iconGroup {
    width: 100px;
    font-size: 1.5rem;
    display: flex;
    justify-content: space-between;
  }
  .mcard {
    margin: 10px;
    background-color: #fff;
    padding: 15px;
    border-radius: 12px;
  }
  .redTag {
    font-size: 8px;
    background-color: red;
    color: #fff;
    border-radius: 5px;
    text-align: center;
    padding: 2px;
    position: absolute;
    top: 0;
    right: -15px;
  }
  .redCircle::before {
    content: "";
    background-color: red;
    border-radius: 50%;
    display: inline-block;
    height: 7px;
    width: 7px;
    margin: 5px;
  }
  .tagbox {
    width: 80px;
    height: 60px;
  }
</style>
<script>
  new Vue({
    el: "#app",
    data: {
      userInfo: {
        name: "某某某",
        company: "小易通",
        communicated: 101,
        tag: [
          { name: "待沟通", num: 101 },
          { name: "面试", num: 0 },
          { name: "收藏", num: 0 },
          { name: "影响力", num: 0 },
        ],
        jobNum: 1,
      },
      useCommon: [
        { name: "招聘数据", icon: "birthday-cake-o" },
        { name: "公司主页", icon: "hot-sale-o", tag: "待完善" },
      ],
      ortherCommon: [
        { name: "规则中心", icon: "font-o" },
        { name: "钱包/发票", icon: "balance-o" },
        { name: "个人中心", icon: "home-o" },
        { name: "我的客服", icon: "user-o" },
        { name: "我的勋章", icon: "medal-o" },
        { name: "帮助反馈", icon: "service-o", url: "./help.html" },
        { name: "隐私政策", icon: "notes-o" },
        { name: "开发票", icon: "notes-o" },
      ],
    },
    components: {
      "main-top": httpVueLoader("../common/commpent/main/workTop.vue"),
      "main-footer": httpVueLoader("../common/commpent/main/mainFooter.vue"),
      "lan-adright": httpVueLoader("../common/commpent/lan/adRight.vue"),
    },
    methods: {
      topage(url) {
        if (url) {
          window.location.href = url;
        }
      },
    },
  });
</script>
